<template>
  <div>
    <header-top title="家庭作业" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div style="background: #f8f8f8" class="content clearfix">
      <teacher-class @data = 'getList' />
<!--      <div class="task-list">-->
<!--        <h3>语文作业</h3>-->
<!--        <p>背诵课文《背影》全文，写一篇800字作文，自命题。</p>-->
<!--        <span>01-15 15:30</span>-->
<!--      </div>-->
      <div v-for="item of taskList" class="task-list" @click="taseDetail(item.taskId)">
        <h3>{{item.subjectName}}作业</h3>
        <p>{{item.taskContent.slice(0,30)}} ...</p>
        <span>{{item.createTime.slice(0,16)}}</span>
      </div>

      <div class="bottomBut" @click="addTask">发布作业</div>

    </div>
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import teacherClass from "@/components/teacherClass/teacherClass";
  import { Toast } from 'vant';   //使用消息提示
  import {reqTask} from "@/api";


  export default {
    name: "task",
    components:{
      headerTop:headerTop,
      teacherClass:teacherClass,
    },
    data(){
      return{
        taskList:null,
        params:{
          taskId:null,
          className: null,
        }
      }
    },
    mounted(){
      let className = this.$store.state.teacherClass[0].gradeClassName
      let data = {className:className}
      this.getList(data)
    },
    methods:{
      async getList(data){
        this.params.className = data.className
        let tasks = await reqTask(this.params.className)
        this.taskList = tasks.data
        if(this.taskList.length == '0'){
          Toast('还没有发布作业')
        }
      },
      taseDetail(taskId){
        this.params.taskId = taskId;
        this.$router.replace({path:'/class/task/detail',query:this.params})
      },
      addTask(){
        this.$router.replace({path:'/class/task/add'})
      }
    },
  }
</script>

<style scoped>
  .task-list{width: 25rem; height: 10.75rem; border-radius:0.5rem; background: #fff; margin: 0 auto 0.75rem; overflow: hidden;}
  .task-list h3{font-size:1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; margin: 1.25rem 0 1.25rem; }
  .task-list p{height: 3.8rem; line-height: 1.35rem; font-size: 1.05rem; border-bottom: 1px solid #e1e1e1; padding: 0 1rem; color:#666;}
  .task-list span{ font-size: 1rem; color:#666; line-height: 2.8rem; padding-left: 1rem;}

</style>
